<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <template #header><b>车辆近7日行驶里程</b></template>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="commandstats" style="height: 420px"/>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {statistics} from '@/api/statistics/statistics';
import * as echarts from 'echarts';

const cache = ref([]);
const commandstats = ref(null);
const usedmemory = ref(null);
const {proxy} = getCurrentInstance();

function getList() {
  proxy.$modal.loading("正在加载数据，请稍候！");
  statistics().then(response => {
    proxy.$modal.closeLoading();
    // 车辆名称
    const keys = Object.keys(response.data)
    let cars = [];
    let series = [];
    for (let index in keys) {
      cars.push(keys[index])
      // 获取到的里程集合
      var mileList = response.data[keys[index]].map(x => x.mileage);
      // 获取时间轴
      var dateList = getLastSevenDays();
      // 转换格式
      var dataQuery = response.data[keys[index]].map(x => formatDate(new Date(x.createTime)))
      // 给echarts数据
      var showList = []
      var c = 0
      for(var i = 0; i < dateList.length; i ++) {
        // 返回结果日期是否有横轴日期
        if (dataQuery.includes(dateList[i])) {
          showList.push(mileList[c]);
          c++
        } else {
          showList.push(0)
        }
      }
      let serie = {
        name: keys[index],
        type: 'line',
        // data: response.data[keys[index]].map(x => x.mileage)
        data: showList
      }
      series.push(serie);
    }
    const commandstatsIntance = echarts.init(commandstats.value);
    commandstatsIntance.setOption({
      title: {
        text: ''
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: cars
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: true,
        data: getLastSevenDays()
      },
      yAxis: {
        type: 'value'
      },
      series: series
    });
  })
}

function formatDate(date) {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  return `${year}-${month}-${day}`; // 输出格式为YYYY-MM-DD
}

function getLastSevenDays() {
  var today = new Date(); // 创建今天的日期对象
  var dateList = []; // 存放日期列表的数组
  for (var i = 0; i < 7; i++) {
    var currentDay = new Date(today); // 复制今天的日期对象
    currentDay.setDate(currentDay.getDate() - 7 + i); // 设置为前i天的日期,如果获取后it天的日期改成currentDay.getDate()+i
    var year = currentDay.getFullYear(); // 年份
    var month = String(currentDay.getMonth() + 1).padStart(2, '0'); // 月份（需要考虑到月份从0开始计算）
    var day = String(currentDay.getDate()).padStart(2, '0'); // 日期
    var formattedDate = `${year}-${month}-${day}`; // 格式化后的日期字符串
    dateList.push(formattedDate); // 将日期添加到数组中
  }
  return dateList;
}

getList();
</script>
